<template lang="">
  <a-layout>
    <a-layout-header style="padding-left: 20px">
      <span style="font-size: 25px">用户信息</span>
    </a-layout-header>
    <a-layout style="padding: 0 24px">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>用户列表</a-breadcrumb-item>
      </a-breadcrumb>
      <div
        style="
          background-color: white;
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div style="margin-left: 40px">
          <span style="font-size: 20px">名字:</span>
          <a-input :style="{ width: '320px' }" placeholder="请输入" allow-clear />
        </div>
        <div style="margin-right: 40px">
          <a-button>重置</a-button>
          <a-button style="margin-left: 20px" type="primary">查询</a-button>
        </div>
      </div>
      <a-table :data="tableData" style="margin-top: 30px">
        <template #columns>
          <div
            style="
              width: 100%;
              height: 60px;
              background-color: white;
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span style="margin-left: 40px">管理员列表</span>
            <a-button style="margin-right: 40px" type="primary">
              <template #icon>
                <icon-plus />
              </template>
              <template #default>新建</template>
            </a-button>
          </div>
          <a-table-column title="序号"> </a-table-column>
          <a-table-column title="用户名" data-index="salary"></a-table-column>
          <a-table-column title="头像" data-index="address"></a-table-column>
          <a-table-column title="名称" data-index="ming"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-button @click="$modal.info({ title: 'Name', content: record.name })"
                >view</a-button
              >
            </template>
          </a-table-column>
        </template>
      </a-table>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon'
import { userAPI } from '@/api/yang'
export default {
  components: { IconPlus, IconDelete },
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    getUserInfo() {
      userAPI().then((res) => {
        console.log(res)
      })
    }
  },
  mounted() {
    this.getUserInfo()
  }
}
</script>
<style lang=""></style>
